<template>
  <section ref="refChart" class="chart_wrap" :class="className" :style="{ height: height, width: width }"></section>
</template>

<script setup>
import { onMounted, onBeforeUnmount, ref, watch, nextTick } from 'vue'
import * as echarts from 'echarts';
import {getDistributionInfo} from '@/api/screen/screen.js'

/**
 * 父组件参数
 */
const props = defineProps({
  className: {
    type: String,
    default: 'chart'
  },
  width: {
    type: String,
    default: '100%'
  },
  height: {
    type: String,
    default: '100%'
  },
  chartFontColor: {
    type: String,
    default: '#000'
  },
  autoResize: {
    type: Boolean,
    default: true
  },
  chartData: {
    type: Object,
    required: true
  },
  txtFontSize: {
    type: Number,
    default: 15
  }
})

/**
 * 定义变量
 */
let myChart = null // 图表
const refChart = ref(null) // 图表ref

/**
 * 监听数据
 */
watch(
  props.chartData,
  (val) => {
    setOption(val)
  },
  { deep: true }
)

/**
 * 方法
 */
/**
 * 工具方法
 */
const setProxyData = (proxyData) => JSON.parse(JSON.stringify(proxyData))

/**
 * 图表相关
 */
// 销毁图表
const destroyChart = (next) => {
  if (myChart) {
    myChart.dispose()
    myChart = null

    if (next) {
      next()
    }
  }
}
// 重置图表
const resetChart = () => {
  // console.log("初始化图表", myChart)

  destroyChart(() => {
    // 重新启动图表
    initChart()
  })
}
// 初始化图表
const initChart = () => {
  myChart = echarts.init(refChart.value, 'macarons')
  // setOption(props.chartData)
  window.onresize = function () {
    // 自适应大小
    myChart.resize()
  }

}

const randomExtend = (minNum, maxNum) => {
  if (arguments.length === 1) {
    return parseInt(Math.random() * minNum + 1, 10)
  } else {
    return parseInt(Math.random() * (maxNum - minNum + 1) + minNum, 10)
  }
}

// 获取图表数据
const numOfBetween90To100 = ref();
const numOfBetween80To90 = ref();
const numOfBetween70To80 = ref();
const numOfBetween60To70 = ref();
const numOfUnder60 = ref();

getDistributionInfo().then(res => {
  for(var i = 0 ; i < res.data.length ; i++){
    if(res.data[i].section === "0-60"){
      numOfUnder60.value = res.data[i].stationCount
    }else if(res.data[i].section === "60-70"){
      numOfBetween60To70.value = res.data[i].stationCount
    }else if(res.data[i].section === "70-80"){
      numOfBetween70To80.value = res.data[i].stationCount
    }else if(res.data[i].section === "80-90"){
      numOfBetween80To90.value = res.data[i].stationCount
    }else if(res.data[i].section === "90-100"){
      numOfBetween90To100.value = res.data[i].stationCount
    }
  }

  myChart.setOption(
    {
      tooltip: {
        trigger: 'item'
      },
      legend: {
        orient: 'horizontal',
        textStyle:{
          color:"#fff"
        },
        itemHeight: 16,
        data:['90-100分','80-90分','70-80分','60-70分','60分以下']
      },
      series: [
        {
          type: 'pie',
          radius: '55%',
          roseSort: false,
          data: [
            { name: '90-100分', value: numOfBetween90To100.value },
            { name: '80-90分', value: numOfBetween80To90.value },
            { name: '70-80分', value: numOfBetween70To80.value },
            { name: '60-70分', value: numOfBetween60To70.value },
            { name: '60分以下', value: numOfUnder60.value },
          ],
          animationType: 'scale', // 动画类型，这里是缩放效果
          animationEasing: 'quadraticOut', // 动画的缓动函数
          animationDelay: function (idx) {
            // 动画延迟（秒），这里是按照 data 的序号进行延迟，值越大越晚执行
            return idx * 100;
          },
          label:{
            show: true,
            color:'#fff',
            formatter:function(arg){
              return '基站数量：' + arg.value + '个' + '\n'+'占比' + arg.percent + '%'
            }
          },
          roseType: 'radius'
        }
      ]
    }
  )
})





/**
 * 生命周期
 */
onMounted(() => {
  nextTick(() => {
    initChart() // 初始化图表
  })
})
onBeforeUnmount(() => {
  destroyChart() // 销毁图表
})

/**
 * 暴露方法
 */
defineExpose({
  resetChart
})
</script>

<style lang="scss" scoped>
.chart_wrap {
  min-height: 100px;
}
</style>
